<template>
	<view class="pay_k">
		<view class="top_title">
			<text></text>
			<text class="top_title_t">选择付款方式</text>
			<text class="hide_pay" @click="$emit('onshowpay',{})">取消</text>
		</view>
		
		<view class="price_d">
		<text class="price_b">￥</text>	
		<text class="price">{{trueprice}}</text>
		</view>
		<radio-group>
		<view  v-if="trueprice > guli">
			<view class="pay_dan"  @click="radioChange(2)">
				<view class="pay_dan_left">
					<image class="pay_dan_left_img" src="../../static/image/shop/wxpay.png" mode="aspectFit"></image>
					<view class="flex">
						<text class="pay_dan_text_t">微信支付</text>
						<text class="pay_dan_text">安全迅速一步到位</text>
					</view>
				</view>
				<radio  value = '2'  :checked="index == '2'" color="#ffbb1c" />
			</view>
			<view style="margin-left: 140rpx;">微信支付: {{trueprice - guli}} 元</view>
			<view style="margin-left: 140rpx;">谷粒支付: {{guli}}</view>
		</view>
		<view v-else class="pay_dan" @click="radioChange(3)">
			<view class="pay_dan_left">
				<image class="pay_dan_left_img" src="@/static/image/member/jinbi2.png" mode="aspectFit"></image>
				<view class="flex">
					<text class="pay_dan_text_t">提货单支付</text>
					<!-- <text class="pay_dan_text">我的提货单：{{guli}}</text> -->
				</view>
			</view>
			
			<radio value = '3' :checked="index == '3'" color="#ffbb1c" />
		</view>
		</radio-group>
		<view class="pay_post btn" @click="post_pay">
		<text class="pay_post_t">立即支付</text>
		</view>
	</view>
</template>

<script>
	import $util from "@/util/util.js"
	export default {
		name: "pay",
		data() {
			return {
			index:0,
			trueprice:0,
			guli:'-'
			};
		},
		computed: {

		},
		props: {
		price:String
		},
		watch:{
		price:{
		handler(e) {
		this.trueprice = e;
		}, 
		immediate: true,
		}
		},
		created() {
			$util.ajax({
				url:'User/gettihuodan'
			},(r)=>{
				if(r.code == 1){
					this.guli = r.data
				}else{
					this.guli = 0
				}
			})
			$util.saveWxOpenid()
		},
		methods: {
		radioChange(i){
		this.index = i
		},
		post_pay(){
		this.$emit('gopay', this.index);
		}
		}
	}
</script>

<style scoped>
.pay_k{
background: #ffffff;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 750rpx;
	color: #383838;
	font-size: 14px;
	z-index: 101;	
}
.top_title{
    height: 50px;
    line-height: 50px;
	flex-direction: row;
    align-items: center;
	justify-content: space-between;
    position: relative;
	background: linear-gradient(to bottom right, #edf5ff, #fff0f7);
	border-radius: 10px 10px 0 0;
}
.top_title_t{
	
}
.hide_pay{
    width: 50px;
    color: #e64340;
}
.price_d{
    flex-direction: row;
    justify-content: center;
    margin: 10px 0;
    align-items:center;
}
.price_b{
	    margin-right: 5px;
}
.price{
    font-size: 30px;
    font-weight: bold;
    color: #ff2983;	
}
.pay_dan{
flex-direction: row;
    justify-content: space-between;
    padding: 10px;	
	align-items: center;
}
.pay_dan_left{
	    flex-direction: row;
	    align-items: center;
}
.pay_dan_left_img{
	width: 50px;
	height: 50px;
	margin-right: 10px;
}
.pay_dan_text_t{
        font-size: 16px;
}
.pay_dan_text{
    color: #5e5e5e;
    font-size: 12px;
    margin-top: 5px;
}
.pay_post{
	align-items: center;
    margin: 20px 20rpx 20px 20rpx;
	width: 710rpx;
	border-radius:50px;
	background: linear-gradient(to bottom right, #c191fa, #7cabff);
}
.pay_post_t{
	color: #ffffff;
	line-height: 50px;
	font-size: 16px;	
}
</style>
